<template>
  <el-form
    :model="formData"
    label-position="left"
    ref="formRef"
    style="max-width: 800px"
  >
    <transition-group 
      name="award-list" 
      tag="div"
      style="position: relative;"
    >
      <el-form-item
        v-for="(award, index) in formData"
        :key="award.id"
        class="award-item"
        style="position: relative;"
      >
        <el-icon 
          class="delete-icon"
          @click="removeAward(index)"
        >
          <Close />
        </el-icon>

        <!-- 奖项名称 & 获奖时间 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item 
              label="奖项名称"
              :prop="`${index}.name`"
              :rules="{ required: true, message: '请输入奖项名称', trigger: 'blur' }">
              <el-input
                v-model="award.name"
                placeholder="请输入奖项名称"
                clearable
                style="width: 100%"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item 
              label="获奖时间"
              :prop="`${index}.date`"
              :rules="{ required: true, message: '请选择获奖日期', trigger: 'change' }">
              <el-date-picker
                v-model="award.date"
                type="date"
                placeholder="请选择获奖日期"
                value-format="YYYY-MM-DD"
                style="width: 100%"/>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 颁奖单位 & 奖项级别 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item 
              label="颁奖单位"
              :prop="`${index}.organization`"
              :rules="{ required: true, message: '请输入颁奖单位', trigger: 'blur' }">
              <el-input
                v-model="award.organization"
                placeholder="请输入颁奖单位"
                clearable
                style="width: 100%"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item 
              label="奖项级别"
              :prop="`${index}.level`"
              :rules="{ required: true, message: '请选择奖项级别', trigger: 'change' }">
              <el-select
                v-model="award.level"
                placeholder="请选择奖项级别"
                style="width: 100%">
                <el-option label="国家级" value="national" />
                <el-option label="省级" value="provincial" />
                <el-option label="市级" value="city" />
                <el-option label="校级" value="school" />
                <el-option label="其他" value="other" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 证明材料上传 -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="证明材料">
              <el-upload
                class="upload-demo"
                :auto-upload="false"
                :on-change="handleFileChange"
                :file-list="award.files"
                multiple
                :limit="3">
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    支持上传PDF/图片文件（不超过5MB）
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
    </transition-group>
    
    <el-form-item style="margin-top: 20px">
      <el-button type="primary" @click="addAward">添加奖项</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { useResumeStore } from '../../store/resume'

const props = defineProps({
  initialData: {
    type: Object,
    default: () => ([])
  }
})

const resumeStore = useResumeStore()
let uid = 1
const formData = reactive([{
  id: uid++,
  name: '',
  date: '',
  organization: '',
  level: '',
  files: []
}])

// 初始化表单数据
onMounted(() => {
  Object.assign(formData, props.initialData)
})

const getFormData = () => {
  return Promise.resolve(formData)
}

defineExpose({
  getFormData
})

const addAward = () => {
  formData.push({
    id: uid++,
    name: '',
    date: '',
    organization: '',
    level: '',
    files: []
  })
}

const removeAward = (index) => {
  formData.splice(index, 1)
}

const handleFileChange = (file, fileList) => {
  // 处理文件上传逻辑
}
</script>

<style scoped>
.award-item {
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s ease;
}

.award-list-move {
  transition: all 0.3s ease;
  z-index: 2;
}

.award-list-enter-active {
  transition: all 0.3s ease;
}

.award-list-leave-active {
  transition: all 0.3s ease;
  position: absolute !important;
  width: 100%;
}

.award-list-enter-from {
  opacity: 0;
  transform: translateY(-20px);
}

.award-list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.award-list-leave-active {
  position: absolute;
  width: 100%;
}

.delete-icon{
  color: '#F56C6C';
  position: absolute;
  left: -32px;
  top: -32px;
  width: 1.2em;
  height: 1.2em;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  z-index: 1;
}

.delete-icon:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 2px 4px rgba(245, 108, 108, 0.3));
  color: #ff7878;
}

.delete-icon:active {
  transform: scale(0.85);
}

.delete-icon::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  background: rgba(245, 108, 108, 0.1);
  opacity: 1.5;
  transition: opacity 0.2s;
}

.delete-icon:hover::after {
  opacity: 1;
}

.el-form-item {
  margin-bottom: 18px;
}

.el-form-item__label {
  padding-right: 12px;
}

.upload-demo {
  width: 100%;
}
</style>
